<template>
   <div style="display: flex; padding: 10px;">
        <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
        <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
        <div style="padding: 0 10px 10px">
          背景色：<ElColorPicker v-model="style.background" size="small"></ElColorPicker>&nbsp;
          文字颜色：<ElColorPicker v-model="style.color" size="small"></ElColorPicker>&nbsp;
        </div>
        <div style="margin-right: 10px"><el-button @click="exportImage" type="primary">导出图片</el-button></div>
    </div>
    <div class="search-box">
        <span>搜索：</span>
        <input type="text" v-model="keyword" placeholder="请输入搜索内容" @keydown.enter="filter" />
    </div>
    
    <div style="height: 95vh;">
        <vue3-tree-org
            ref="tree"
            :data="data"
            :center="center"
            :render-content="renderContent"
            :horizontal="horizontal"
            :props="{id: 'id', pid: 'pid', deptName: 'deptName', jobName: 'jobName',lastName:'lastName',children: 'children',url:'url',type:'type'}"
            :collapsable="collapsable"
            :label-style="style"
            :scalable="true"
            :default-expand-level="10"
            :filter-node-method="filterNodeMethod"
        >
            <!-- 自定义节点内容 -->
            <template v-slot="{node}">
                <div v-if="node.$$data.type" class="tree-org-node__text node-label">
                    <div class="custom-content-top" :style="style">{{node.$$data.deptName}}</div>
                    <div class="custom-content-center">
                      <div class="custom-content-left">
                        <img :src="node.$$data.url" alt="" />
                      </div>
                      <div class="custom-content-right">
                        <div class="custom-content-right-job">
                          {{node.$$data.jobName}}
                        </div>
                        <div class="custom-content-right-lastname">
                          {{node.$$data.lastName}}
                        </div>
                      </div>
                  </div>
                </div>
                <div v-else class="tree-org-node__text node-label">
                  <div class="custom-content-top">{{node.$$data.deptName}}</div>
                  <div v-for="item in node.$$data.list" :key="item.id" class="custom-content-center">
                      <div class="custom-content-left">
                        <img :src="item.url" alt="" />
                      </div>
                      <div class="custom-content-right">
                        <div class="custom-content-right-job">
                          {{item.jobName}}
                        </div>
                        <div class="custom-content-right-lastname">
                          {{item.lastName}}
                        </div>
                      </div>
                  </div>
                </div>
            </template>
            <!-- 自定义展开按钮 -->
            <template v-slot:expand="{node}">
                <div>{{node.children.length}}</div>
            </template>
        </vue3-tree-org>
    </div>
</template>
<script>

import { ElColorPicker,ElButton } from 'element-plus';
import domToImage from 'dom-to-image';

export default {
  name: "demo-chart",
  components: {
    ElColorPicker,ElButton
    },
  data() {
    return {
      data: {
          "id":1,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事长","lastName":"康晴","url":"./photo.png",
          "children":[
              {
                  "id":2,"pid":1,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"总经理","lastName":"徐金尧","url":"./photo.png",
                  "children":[
                      {"id":11,"pid":3,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"研发副总","lastName":"张清龙","url":"./photo1.png",
                        "children":[
                        {"id":24,"pid":11,"type":true,"label":"研发部","deptName":"研发部","jobName":"经理","lastName":"王益民","url":"./photo1.png",
                          "children":[
                            {"id":26,"pid":24,"type":true,"label":"项目一组","deptName":"项目一组","jobName":"项目主管","lastName":"曾甘霖","url":"./photo1.png",
                              "children":[
                              {"id":null,"pid":26,"type":false,"label":"项目一组","deptName":"项目一组",
                                "list":[{"id":32,"jobName":"项目工程师","lastName":"王益民","url":"./photo1.png"},
                                {"id":33,"jobName":"产品工程师","lastName":"王培文","url":"./photo1.png"},
                                {"id":34,"jobName":"电子工程师","lastName":"刘冲文","url":"./photo1.png"},
                                {"id":35,"jobName":"助理工程师","lastName":"从明姓","url":"./photo1.png"}]
                              }
                              ]
                            },
                            {"id":27,"pid":24,"type":true,"label":"项目二组","deptName":"项目二组","jobName":"项目主管","lastName":"杨先念","url":"./photo1.png",
                              "children":[
                                {"id":null,"pid":27,"type":false,"label":"项目二组","deptName":"项目二组",
                                  "list":[{"id":32,"jobName":"产品工程师","lastName":"葛光领","url":"./photo1.png"},
                                  {"id":37,"jobName":"助理工程师","lastName":"周杰","url":"./photo1.png"}]
                                }
                              ]
                            },
                            {"id":28,"pid":24,"type":true,"label":"项目三组","deptName":"项目三组","jobName":"项目主管","lastName":"肖辉","url":"./photo1.png",
                              "children":[
                                {"id":null,"pid":28,"type":false,"label":"项目三组","deptName":"项目三组",
                                  "list":[{"id":38,"jobName":"项目工程师","lastName":"张束尼","url":"./photo1.png"},
                                  {"id":39,"jobName":"设计工程师","lastName":"徐恩广","url":"./photo1.png"},
                                  {"id":40,"jobName":"产品工程师","lastName":"蔡任杰","url":"./photo1.png"},
                                  {"id":41,"jobName":"电子工程师","lastName":"张春雷","url":"./photo1.png"},
                                  {"id":42,"jobName":"电子工程师","lastName":"水成峰","url":"./photo1.png"},
                                  {"id":43,"jobName":"电子工程师","lastName":"宋红涛","url":"./photo1.png"}]
                                }
                              ]
                            },
                            {"id":29,"pid":24,"type":true,"label":"项目四组","deptName":"项目四组","jobName":"项目主管","lastName":"陈金","url":"./photo1.png",
                              "children":[
                                {"id":null,"pid":29,"type":false,"label":"项目四组","deptName":"项目四组",
                                    "list":[{"id":44,"jobName":"项目工程师","lastName":"丁撵","url":"./photo1.png"},
                                    {"id":45,"jobName":"电子工程师","lastName":"卓笋峰","url":"./photo1.png"}]
                                  }
                              ]
                            },
                            {"id":30,"pid":24,"type":true,"label":"项目五组","deptName":"项目五组","jobName":"项目主管","lastName":"马先赫","url":"./photo1.png",},
                            {"id":31,"pid":24,"type":true,"label":"项目六组","deptName":"项目六组","jobName":"项目主管","lastName":"张佳尔","url":"./photo1.png",
                              "children":[
                              {"id":null,"pid":31,"type":false,"label":"项目六组","deptName":"项目六组",
                                    "list":[{"id":46,"jobName":"资深步进工程师","lastName":"张茶生","url":"./photo1.png"}]
                                  }
                              ]
                            },
                            {"id":32,"pid":24,"type":true,"label":"研发部","deptName":"研发部","jobName":"研发文控","lastName":"于童","url":"./photo1.png",}
                          ]
                        },
                        {"id":25,"pid":11,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"技术总工","lastName":"吴海松","url":"./photo.png",},
                        ]
                      },
                      {"id":12,"pid":3,"type":true,"label":"采购部","deptName":"采购部","jobName":"经理","lastName":"杨林达","url":"./photo1.png",},
                      {"id":13,"pid":3,"type":true,"label":"财务部","deptName":"财务部","jobName":"经理","lastName":"杨清","url":"./photo1.png",},
                      {"id":14,"pid":3,"type":true,"label":"品管部","deptName":"品管部","jobName":"经理","lastName":"黄清华","url":"./photo1.png",
                        "children":[
                        {"id":16,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"测试中心主管","lastName":"李其攒","url":"./photo1.png",
                          "children":[
                              {"id":null,"pid":16,"type":false,"label":"品管部","deptName":"品管部",
                                    "list":[{"id":47,"jobName":"测试工程师","lastName":"陈中娟","url":"./photo1.png"},
                                    {"id":48,"jobName":"测试员","lastName":"闵贾娟","url":"./photo1.png"},
                                    ]
                                  }
                              ]
                        },
                        {"id":17,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"质量主管","lastName":"苏畅","url":"./photo1.png",
                          "children":[
                              {"id":null,"pid":14,"type":false,"label":"品管部","deptName":"品管部",
                                    "list":[{"id":51,"jobName":"质量工程师","lastName":"文涛","url":"./photo1.png"}]
                                  }
                              ]
                        },
                        {"id":18,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"质量主管","lastName":"王海军","url":"./photo1.png",
                          "children":[
                              {"id":null,"pid":18,"type":false,"label":"品管部","deptName":"品管部",
                                    "list":[{"id":49,"jobName":"质量工程师","lastName":"吴佳伟","url":"./photo1.png"},
                                    {"id":50,"jobName":"助理设备工程师","lastName":"朱江海","url":"./photo1.png"},
                                    ]
                                  }
                              ]
                        },
                        {"id":19,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"文员","lastName":"袁吉","url":"./photo1.png"}
                        ]
                      },
                      {"id":23,"pid":3,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"常务副总经理","lastName":"房家全","url":"./photo.png",
                        "children":[
                          {"id":15,"pid":23,"type":true,"label":"物流部","deptName":"物流部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
                          {"id":20,"pid":23,"type":true,"label":"总经办","deptName":"总经办","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
                          {"id":21,"pid":23,"type":true,"label":"人力资源部","deptName":"人力资源部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
                          {"id":22,"pid":23,"type":true,"label":"信息管理部","deptName":"信息管理部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
                        ]
                      },

                     
                  ]
              },
              {
                  "id":3,"pid":1,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事会秘书","lastName":"邹文霞","url":"./photo.png",
                  "children":[
                      {"id":6,"pid":2,"type":true,"label":"董事办","deptName":"董事办","jobName":"行政助理","lastName":"项瑜","url":"./photo1.png",},
                      {"id":8,"pid":2,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事会秘书","lastName":"董周斌","url":"./photo1.png",}
                  ]
              },
             
          ]
      },
      keyword:'',
      center:true,
      horizontal: false,
      collapsable: true,
      expandAll: true,
      style: {
        background: "#0e339b",
        color: "#ffffff",
      },
    };
  },
  
    


  methods: {
    onMenus({ node, command }) {
      console.log(node, command);
    },
    onNodeClick(e, data) {
      alert(data.title);
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
    filter(){
        this.$refs.tree.filter(this.keyword)
    },
    filterNodeMethod(value, data) {
        console.log(value, data)
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    },
    exportImage() {
      const treeOrgEl = this.$refs.tree.$el;
      domToImage.toPng(treeOrgEl) // 转换为 PNG 格式
        .then(function (dataURL) {
          const link = document.createElement('a');
          link.href = dataURL;
          link.download = 'tree_image.png';
          link.click();
          link.remove();
        })
        .catch(function (error) {
          console.error('导出图片出错:', error);
        });
    }
  },
};
</script>
<!-- <style lang="scss" scoped>
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
</style> -->
